<template>
  <div class="addposiman">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="所属地市：" prop="ssds">
                <el-select
                  v-model="formData.ssds"
                  placeholder="请选择"
                  clearable
                  :style="{width: '100%'}"
                  filterable
                >
                  <el-option
                    v-for="(item) in CompanyList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="变电站名称：" prop="bdzmc">
                <!-- <el-input v-model="formData.bdzmc" placeholder clearable :style="{width: '100%'}" /> -->
                <el-select
                  v-model="formData.bdzmc"
                  filterable
                  placeholder="请选择"
                  clearable
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="(item) in LocalCityList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机器人名称：" prop="jqrmc">
                <el-input
                  v-model="formData.jqrmc"
                  placeholder="请输入"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="编号：" prop="bh">
                <el-input v-model="formData.bh" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="类型：" prop="lx">
                <el-input v-model="formData.lx" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产厂家：" prop="sccj">
                <el-input
                  v-model="formData.sccj"
                  placeholder="请输入"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="型号：" prop="xh">
                <el-input v-model="formData.xh" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划名称：" prop="jhmc">
                <el-input v-model="formData.jhmc" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划转运起点站：" prop="jhzyqdz">
                <el-input
                  v-model="formData.jhzyqdz"
                  placeholder="请输入"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="计划转运终点站：" prop="jhzyzdz">
                <el-input
                  v-model="formData.jhzyzdz"
                  placeholder
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际转运起点站：" prop="sjzyqdz">
                <el-input
                  v-model="formData.sjzyqdz"
                  placeholder
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际转运终点站：" prop="sjzyzdz">
                <el-input
                  v-model="formData.sjzyzdz"
                  placeholder
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
               <el-form-item label="转运起始时间：" prop="startTime">
                <!-- <el-input v-model="formData.zyqssj" placeholder clearable :style="{width: '100%'}" /> -->
                 <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.startTime"
                      value-format="yyyy-MM-dd"
                      type="datetimerange"
                      align="right"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="转运过程记录：" prop="zygcjl">
                <el-input v-model="formData.zygcjl" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="异常情况描述：" prop="ycqkms">
                <el-input
                  v-model="formData.ycqkms"
                  placeholder="请输入"
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="备注：" prop="bz">
                <el-input v-model="formData.bz" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <div class="addposiman-btn">
                <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
                <el-button class="table-query" type="primary" @click="clsoe">关闭</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
// import { delete } from 'vue/types/umd';
import { JointInspectionModule } from "@/store/modules/JointInspection";
import filter from '@/utils/filter';

@Component
export default class addposiman extends Vue {
  @Prop() tableSelect: any;
  tableEditList = {};
  formData:any = {
    ssds: "xxxx区域", //区域信息
    bdzmc: "",
    jqrmc: "",
    bh: "",
    lx: "",
    sccj: "",
    xh: "",
    jhmc: "",
    jhzyqdz: "",
    jhzyzdz: "",
    sjzyqdz: "",
    sjzyzdz: "",
    zygcjl: "",
    ycqkms: "",
    bz: "",
    startTime:[]
  };
  rules = {
    startTime: [{ type:'array',required: true, message: "请输入内容", trigger: "change" }],
    ssds: [{ required: true, message: "请输入内容", trigger: "change" }],
    bdzmc: [{ required: true, message: "请输入内容", trigger: "change" }],
    jqrmc: [{ required: true,  message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    bh: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    lx: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    sccj: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    xh: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    jhmc: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    jhzyqdz: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    jhzyzdz: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    sjzyqdz: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    sjzyzdz: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    zygcjl: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    ycqkms: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
    bz: [{ required: true, message: "请输入内容", trigger: "blur" },
    {max:50,message:'长度在50字内', trigger: "blur" }],
  };
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
    get LocalCityList() {
    let CompanyList = JointInspectionModule.LocalCityList || [];
    return CompanyList;
  }
  $refs!: {
    elForm: any;
  };
  //创建
  clsoe() {
    this.$emit("close");
  }
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单
      this.formData.id=this.tableSelect[0].ID;
       this.formData.zyqssj =this.formData.startTime[0];
      this.formData.zyjssj =this.formData.startTime[1];
      
      this.$delete(this.formData,'startTime');

      (this as any).$services
        .updateTpList({ data: this.formData })
        .then((result: any) => {
          // console.log(result);
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: `${result.message}`,
            });
      this.$emit("close");

          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
        })
        .catch((err: any) => {
          this.$message({
            type: "error",
            message: `${err.msg}`,
          });
      this.$emit("close");

        });

      // console.log(this.formData);
    });
  }
  // nameTo(object) {
  //   let regObj = new RegExp("([A-Z+])", "g");
  //   for (let i in object) {
  //     if (object.hasOwnProperty(i)) {
  //       let temp = object[i];
  //       if (regObj.test(i.toString())) {
  //         temp = object[
  //           i.replace(regObj, (result) => {
  //             return result.toLowerCase();
  //           })
  //         ] = object[i];
  //         delete object[i];
  //       }
  //       if (
  //         typeof temp === "object" ||
  //         Object.prototype.toString.call(temp) === "[object Array]"
  //       ) {
  //         this.nameTo(temp);
  //       }
  //     }
  //   }
  //   return object;
  // }
  mounted() {
this.formData.startTime=this.tableSelect[0].startTime ||[];
this.formData.ssds=this.tableSelect[0].SSDS ||'';
this.formData.bdzmc=this.tableSelect[0].STATIONID||'';
this.formData.jqrmc=this.tableSelect[0].JQRMC||'';
this.formData.bh=this.tableSelect[0].BH||'';
this.formData.lx=this.tableSelect[0].LX||'';
this.formData.sccj=this.tableSelect[0].SCCJ||'';
this.formData.xh=this.tableSelect[0].XH||'';
this.formData.jhmc=this.tableSelect[0].JHMC||'';
this.formData.jhzyqdz=this.tableSelect[0].JHZYQDZ||'';
this.formData.jhzyzdz=this.tableSelect[0].JHZYZDZ||'';
this.formData.sjzyqdz=this.tableSelect[0].SJZYQDZ||'';
this.formData.sjzyzdz=this.tableSelect[0].SJZYZDZ||'';
this.formData.zygcjl=this.tableSelect[0].ZYGCJL||'';
this.formData.ycqkms=this.tableSelect[0].YCQKMS||'';
this.formData.bz=this.tableSelect[0].BZ||'';
    // console.log(this.tableSelect);
  }
}
</script>

<style lang="scss" scoped>
.addposiman {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

